<template>

  <div class="header">

    <div class="header-box">
      <div class="header-left">
        <div class="pic">
          <img src="../../public/logo.png" alt="" />
        </div>
        <div className="search">
          <div className="search-box">
            <form className="search-table">
              <input
                type="text"
                placeholder="搜索词条"
                name=""
                id="search-info"
                v-model="serachText"
              />
              <span title="搜索" @click="handerSerach"><i class="iconfont icon-31sousuo"></i> </span>
            </form>
            <div className="search-list"></div>
          </div>
        </div>
      </div>
      <div class="header-center">
        <router-link to="/home" custom v-slot="{ navigate, isActive }">
          <div @click="navigate" :class="isActive ? 'active header-center-item' : 'header-center-item'">
            <div class="icon-box">
              <i class="no-inherit iconfont icon-home"></i>
            </div>
          </div>
        </router-link>
        <router-link to="/video" custom v-slot="{ navigate, isActive }">
          <div @click="navigate" :class="isActive ? 'active header-center-item' : 'header-center-item'">
            <div class="icon-box">
               <i class="no-inherit iconfont icon-shipin2"></i>
            </div>
          </div>
        </router-link>
        <router-link to="/news" custom v-slot="{ navigate, isActive }">
          <div @click="navigate" :class="isActive ? 'active header-center-item' : 'header-center-item'">
            <div class="icon-box my-Message">
               <i class="no-inherit iconfont icon-xinfengyoujian "></i>
               <div class="my-Message-number" v-if="allUnread>0">
                  {{allUnread}}
               </div>
            </div>
          </div>
        </router-link>

        <router-link to="/user/myhome" custom v-slot="{ navigate, isActive }">
          <div @click="navigate" :class="isActive ? 'active header-center-item' : 'header-center-item'">
            <div class="icon-box">
              <div class="avatar" v-if="user.isUser">
                <img :src="user.avatar" alt="">
              </div>
               <i v-else class="no-inherit iconfont icon-31wode "></i>
            </div>
          </div>
        </router-link>
      </div>
      <div class="header-right">
          <div class="login-reg" v-if="!loginState">
             <router-link to="/login/checkuser" custom v-slot="{ navigate }">
            <div class="login-box" @click="navigate" >
              <span>登录</span>
            </div>
            </router-link>
              <router-link to="/login/registeruser" custom v-slot="{ navigate }">
             <div class="reg-box"   @click="navigate">
              <span>注册</span>
            </div>
             </router-link>
          </div>
          <div @click.stop="showSet" v-else class='header-right-item'>
            <div class="icon-box">
              <i class="no-inherit-two iconfont icon-chilun "></i>
            </div>
            <div class="pop-up" v-if="popState">
              <div class="pop-item" @click="setdata">
                修改资料
              </div>
              <!-- <div class="pop-item">
                修改密码
              </div> -->
              <div class="pop-item" @click="removeUser">
                退出登录
              </div>
            </div>
          </div>
          <div @click="goUpload" class='header-right-item'>
            <div class="icon-box">
                <i class="no-inherit-two iconfont icon-shuxie"></i>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>

import { mapState, mapMutations } from 'vuex'

import http from '@/util/http'
export default {

  components: {

  },
  data () {
    return {
      serachText: '',
      popState: false, // 下拉框显示
      loginState: false // 是否显示登录和注册按钮

    }
  },
  computed: {
    ...mapState(['user', 'serach', 'considerData', 'allUnread'])
  },
  mounted () {
    // console.log(this.user.avatar)
    this.serachText = this.serach
    // 监听点击事件
    document.addEventListener('click', this.bodyCloseMenus)
    if (localStorage.getItem('token')) {
      this.loginState = true
    } else {
      this.loginState = false
    }
  },

  methods: {
    ...mapMutations([
      'handelSerach',
      'meshowConsider',
      'handerConsiderData'

    ]),

    // 跳转搜索页面
    handerSerach () {
      if (this.serachText === '') {
        console.log(111)
      } else {
        // 将搜索内容存储到公共状态
        this.handelSerach(this.serachText)
        const routeUrl = this.$router.resolve({ path: '/serach/article', query: { serachText: this.serachText } })
        window.open(routeUrl.href, '_blank')
      }
    },
    // 跳转到上传页面
    goUpload () {
      this.$router.push({ path: '/upload' })
    },
    showSet () {
      this.popState = !this.popState
    },
    // 消除事件
    bodyCloseMenus (e) {
      const self = this

      if (self.popState === true) {
        self.popState = false
      }
    },
    // 修改资料
    setdata () {
      console.log('111')
      this.$router.push({ path: '/user/userdata' })
    },
    // 退出登录
    removeUser () {
      // 调出选择框
      this.meshowConsider(true)
      // 传递选择框的内容和类型
      this.handerConsiderData({ title: '退出登录', text: '是否确认退出登录', type: 'removeUser' })
    }

  },
  unmounted () {
    // 页面销毁时移除事件
    document.removeEventListener('click', this.bodyCloseMenus)
  }

}
</script>

<style lang="scss" scoped>
// 引入基础配置
@use "@/styles/init" as h;
// 右侧的边距
$margin-about: 10px;

// 导航栏的高
$header-height: 54px;
.active {
  color: h.$main-color !important;
  border-bottom: 3px solid h.$main-color;
}

.header {
  background: white;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  border-bottom: 1px solid rgb(240, 240, 240);
  .header-box {
    width: 80%;
    margin: 0 auto;

    height: $header-height;
    display: flex;
    justify-content: space-between;
    .header-left {
      width: 2.7rem;
      display: flex;

      .pic {
        img {
          height: 80%;
          margin: $header-height * 0.1;
        }
      }
      .search {
        width: 220px;

        .search-box {
          width: 100%;
          height: $header-height * (2/3);
          margin: $header-height * (1/6) 0;
          border-radius: 20px;
          background: h.$background-color;
          position: relative;
          .search-table {
            min-width: 120px;
            display: flex;
            justify-content: space-between;
            width: 90%;
            margin: 0 auto;
            z-index: 99;
            #search-info {
              width: 100%;
              border: none;
              height: $header-height * 0.5;
              margin: $header-height / 12;
              background: h.$background-color;
              outline: none;
            }
            span {
              display: inline-block;
              border: none;
              height: $header-height * 0.5;
              margin: $header-height / 12;
              cursor: pointer;
              i{
                font-size: 20px;
                display: inline-block;

              }
            }
          }
        }
      }
    }
    .header-center {
      width: 5rem;
      display: flex;
      line-height: $header-height * 0.8;
      // no-inherit 控制中间图标大小
        .no-inherit {
                font-size: 26px;
              }

      .header-center-item{
        margin: 0 20px;
        .my-Message{
          position: relative;
          .my-Message-number{
            text-align: center;
            position: absolute;
            font-size: 12px;
            transform: scale(0.833);
            padding: 2px;
            color: #fff;
            font-weight: 700;
            line-height: 14px;
            width: 20px;
            height: 14px;
            background: #ff2026;
            top: -5px;
            left: 30px;
            z-index: 1999;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;

          }
        }
        .icon-box{
          width: $header-height * 0.8;
          text-align: center;
          height: $header-height * 0.6;
          margin: $header-height * 0.2 0px;
          line-height: $header-height *0.6;
          border-radius: 5px;
          cursor: pointer;

          .avatar{
            width: 100%;
            height: 100%;
              object-fit: cover;
            position: relative;
            img{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 32px;
              height: 32px;
              display: block;
              border-radius: 50%;
            }
          }

        }
        .icon-box:hover {background: rgb(220, 220, 220);}
        }

    }
    .header-right{
      width: 1.2rem;
      display: flex;
      .login-reg{
        display: flex;
        position: relative;
        .login-box{
          width: $header-height * 1;
          text-align: center;
          height: $header-height * 0.55;
          margin: $header-height * 0.2;
          line-height: $header-height *0.55;
          border-radius: 12px;
          cursor: pointer;
          // background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
          // background-image: linear-gradient(to right bottom, #f6c970, #face63, #fcd356, #fdd946, #fddf34, #fed426, #ffc916, #ffbe00, #ff9e00, #fd7c00, #f75502, #ee1d19);
          background-image: linear-gradient(to right bottom, #f6c970, #face63, #fcd356, #fdd946, #fddf34, #fed426, #ffc916, #ffbd00, #fe9d08, #f97d1b, #ef5c29, #e03834);
          // background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
          color: #fff;
          span{
            font-size: 14px;
          }
        }
        .reg-box{
          width: $header-height * 1;
          text-align: center;
          height: $header-height * 0.6;
          margin: $header-height * 0.2;
          line-height: $header-height *0.55;
          border-radius: 12px;
          cursor: pointer;
          span{
            font-size: 14px;
          }
        }
      }

      .header-right-item{
        position: relative;
        .icon-box{
          width: $header-height * 0.6;
          text-align: center;
          height: $header-height * 0.6;
          margin: $header-height * 0.15;
          line-height: $header-height *0.65;
          border-radius: 50%;
          cursor: pointer;
          background: rgb(235, 235, 235);
          .no-inherit-two{
            font-size: 22px;
          }

        }
        .icon-box:hover {background: h.$main-color; color: white;}
        }
        .pop-up{
          width: 120px;
          min-height: 80px;
          position: absolute;
          border-radius: 5px;
          top: 50px;
          left: -60px ;
          background: #fff;
          box-shadow: 2px 2px 5px rgb(224 224 224), -2px -2px 5px rgb(224 224 224);
          .pop-item{
            text-align: center;
            font-size: 14px;
            padding: 12px 0;
            cursor: pointer;
            &:hover{
              background: rgb(224 224 224);
            }
          }
        }
    }
  }
  @media screen and (min-width:856px) and (max-width:1154px) {
    .header-box{
      width: 94%;
    }
  }
  @media screen and (min-width:540px) and (max-width:856px) {
    $header-height: 48px;
   .header-box {
    width: 98%;
    margin: 0 auto;

    height: $header-height;
    display: flex;
    justify-content: space-between;
    .header-left {
      width: 2.7rem;
      display: flex;

      .pic {
        img {
          height: 80%;
          margin: $header-height * 0.1;
        }
      }
      .search {
        width: 100%;

        .search-box {
          width: 100%;
          height: $header-height * (2/3);
          margin: $header-height * (1/6) 0;
          border-radius: 20px;
          background: h.$background-color;
          position: relative;
          .search-table {
            min-width: 120px;
            display: flex;
            justify-content: space-between;
            width: 90%;
            margin: 0 auto;
            z-index: 99;
            #search-info {
              width: 100%;
              border: none;
              height: $header-height * 0.5;
              margin: $header-height / 12;
              background: h.$background-color;
              outline: none;
            }
            span {
              display: inline-block;
              border: none;
              height: $header-height * 0.5;
              margin: $header-height / 12;
              cursor: pointer;
              i{
                font-size: 20px;
                display: inline-block;

              }
            }
          }
        }
      }
    }
    .header-center {
      width: 5rem;
      display: flex;
      line-height: $header-height * 0.8;
      // no-inherit 控制中间图标大小
        .no-inherit {
                font-size: 26px;
              }

      .header-center-item{
        margin: 0 6px;
        .icon-box{
          width: $header-height * 0.8;
          text-align: center;
          height: $header-height * 0.6;
          margin: $header-height * 0.2 0px;
          line-height: $header-height *0.6;
          border-radius: 5px;
          cursor: pointer;
          .avatar{
            width: 100%;
            height: 100%;
              object-fit: cover;
            position: relative;
            img{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 32px;
              height: 32px;
              display: block;
              border-radius: 50%;
            }
          }

        }
        .icon-box:hover {background: rgb(220, 220, 220);}
        }

    }
    .header-right{
      width: 1.2rem;
      display: flex;

      .header-right-item{
        position: relative;
        .icon-box{
          width: $header-height * 0.7;
          text-align: center;
          height: $header-height * 0.7;
          margin: $header-height * 0.15;
          line-height: $header-height *0.65;
          border-radius: 50%;
          cursor: pointer;
          background: rgb(235, 235, 235);
          .no-inherit-two{
            font-size: 22px;
          }

        }
        .icon-box:hover {background: h.$main-color; color: white;}
        }
        .pop-up{
          width: 120px;
          min-height: 80px;
          position: absolute;
          border-radius: 5px;
          top: 50px;
          left: -60px ;
          background: #fff;
          box-shadow: 2px 2px 5px rgb(224 224 224), -2px -2px 5px rgb(224 224 224);
          .pop-item{
            text-align: center;
            font-size: 14px;
            padding: 12px 0;
            cursor: pointer;
            &:hover{
              background: rgb(224 224 224);
            }
          }
        }
    }
  }
  }
}
</style>
